<template>
  <section class="app-main">

    <div class="dashboard-editor-container">
      <el-divider content-position="left">检测过程</el-divider>
      <el-row>
        <div
          v-for="(item, index) in linkOption"
          :key="index"
          class="index-se"
          :style="{background: item.bgc, opacity: '1', cursor: 'pointer'}">
          <router-link :to="item.url">
            <el-button
              size="mini"
              type="text"
              :icon="item.icon"
            >{{ item.title }}
            </el-button>
          </router-link>
        </div>
      </el-row>
      <el-divider content-position="left">待修改</el-divider>
      <el-row>
        <div
          v-for="(item, index) in linkOption2"
          :key="index"
          class="index-se"
          :style="{background: item.bgc, opacity:'1', cursor: 'pointer'}">
          <router-link :to="item.url ? item.url : '#'">
            <el-button
              size="mini"
              type="text"
              :icon="item.icon"
            >{{ item.title }}
            </el-button>
          </router-link>
        </div>
      </el-row>
    </div>
  </section>
</template>


<script>
export default {
  name: 'AppMain',
  data() {
    return {
      moreUrl: 'http://yjglj.suzhou.gov.cn/szsafety/index.shtml',
      activeName: "first",
      workList: [],
      todoList: [],
      noticeList: [],
      newsList: {},
      todoNum: 0,
      linkOption: [
        {
          title: '现场调查记录表',
          icon: 'el-icon-s-promotion',
          bgc: 'rgba(245, 74, 93, 1)',
          url: '/table2/myTableOne'
        },
        {
          title: '现场检测方案',
          icon: 'el-icon-s-check',
          bgc: 'rgba(243,147,82,1)',
          url: '/table2/myTableTwo'
        },
        {
          title: '写实记录表',
          icon: 'el-icon-monitor',
          bgc: 'rgba(23,155,213,1)',
          url: '/table2/myTableThree'
        },
        {
          title: '采样记录表',
          icon: 'el-icon-postcard',
          bgc: 'rgba(33,173,73,1)',
          url: '/table2/myTableFour'
        },
        {
          title: '样品交接单',
          icon: 'el-icon-s-custom',
          bgc: 'rgba(0,128,129,1)',
          url: '/table2/myTableFive'
        },
        {
          title: '实验室检测',
          icon: 'el-icon-position',
          bgc: 'rgba(2,125,180,1)',
          url: '/table2/myTableSix'
        },
        {
          title: '报告中心',
          icon: 'el-icon-s-operation',
          bgc: 'rgba(1,191,191,1)',
          url: '/table2/myTableSeven'
        }
      ],
      linkOption2: [
        {
          title: '待修改现成记录',
          icon: 'el-icon-s-promotion',
          bgc: 'rgba(245, 74, 13, 1)',
          url: '/table2/myTableRes1'
        },
        {
          title: '待修改检测结果',
          icon: 'el-icon-s-check',
          bgc: 'rgba(243,147,22,1)',
          url: '/table2/myTableRes2'
        }
      ]
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    },
    pathOption() {
      let path = []
      this.$store.getters.permission_routes.forEach(item => {
        if (item.children) {
          item.children.forEach(_item => {
            path.push(`${item.path}/${_item.path}`)
          })
        } else {
          path.push(item.path)
        }
      })
      return path
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .dashboard-editor-container {
    padding: 10px;
    //background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  .index-se-tz {
    border-radius: 4px;
    float: left;
    width: 12.28%;
    margin: 1%;
  }

  .index-se {
    line-height: 60px;
    text-align: center;
    border-radius: 4px;
    float: left;
    width: 18%;
    margin: 1%;
  }

  .index-se .el-button--text {
    color: white;
    font-size: 18px;
    font-weight: 400;
  }

  .el-card__header .el-button--text {
    color: #666666;
  }

  /deep/ .el-card__header {
    padding-bottom: 12px;
  }

  .el-card__header .clearfix {
    border-left: 6px solid #179BD5;
    line-height: 18px;
    height: 18px;
    padding-left: 15px;
  }

  .index-se-tz-h-t {
    font-size: 12px;
    text-align: right;
    height: 25px;
    line-height: 25px;
  }

  .index-se-tz-h-content {
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
  }

  .red-bis {
    margin-top: 5px;
    width: 10px;
    height: 10px;
    background: rgba(245, 74, 93, 1);
    border-radius: 6px;
    margin-right: 5px;
    float: left;
  }

  .green-bis {
    margin-top: 5px;
    width: 10px;
    height: 10px;
    background: rgba(33, 173, 73, 1);;
    border-radius: 6px;
    margin-right: 5px;
    float: left;
  }

  .index-se-tz-h-content-time {
    font-size: 12px;
    font-weight: 500;
    height: 17px;
    line-height: 17px;
    text-align: right;
  }

  .tz-content {
    padding: 10px;
    border-radius: 2px;
    border: 1px solid rgba(230, 230, 230, 1);
  }

  .tz-content-atr {
    padding-left: 15px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    height: 17px;
    line-height: 17px;
  }

  .tz-content-time {
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    height: 17px;
    line-height: 17px;
  }

  .index-se-gen {
    text-align: center;
    border-radius: 4px;
    float: left;
    width: 12.28%;
    margin: 1%;
  }

  .index-se-news {
    text-align: center;
    border-radius: 4px;
    float: left;
    width: 12.28%;
    margin: 1%;
  }

  /deep/ .el-card__body {
    padding: 0 20px;
  }

  .list_a {
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  .list_a:last-child {
    border-bottom: none;
  }

  .list_a .name {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
  }

  .list_a .text {
    color: #666666;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .name:hover {
    color: #1890ff;
  }


  .list_a .info {
    color: #999999;
    font-size: 12px;
  }

  .list_a .info span {
    margin-right: 10px;
  }

  .list_a .info .el-tag {
    border-radius: 50px;
    padding: 0 10px;
  }

  .list_b {
    padding-top: 15px;
  }

  .list_b .text {
    width: calc(100% - 155px);
    display: inline-block;
  }

  .list_b .name {
    line-height: 43px;
    height: 43px;
    list-style: disc;
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    cursor: pointer;
  }

  .list_b .name:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #21AD49;
    position: absolute;
    left: 0;
    top: 16px;
  }

  .list_b .name .fr {
    float: right;
  }

  .list_b .name.danger {
    color: #F54A5D;
  }

  .list_b .name.danger:after {
    background-color: #F54A5D;
  }

  .list_c {
    border: 1px solid #e5e5e5;
    padding: 20px 15px;
    margin: 10px 0;
  }

  .list_c:hover {
    border-color: #1890ff;
  }

  .list_a.list_c:last-child {
    border: 1px solid #e5e5e5;
  }

  .list_d {
    /*padding-top: 0;*/
  }

  .list_d .name:after {
    border-radius: 0;
    background-color: #179BD5;
  }

  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>
